<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        msg: 'abc'
      },


      // 内部会解析template(大量正则技术)生成render函数 => 后面就会调用此函数生成虚拟DOM => 生成真实DOM, 并替换掉页面上的el元素显示
      template: `
        <h3>{{msg}}h3</h3>
      `,

      /* 
      创建并返回虚拟Node/虚拟DOM  =>  后面就会调用此函数生成虚拟DOM => 后面就会生成真实DOM, 并替换掉页面上的el元素显示
      render函数, 接收一个创建虚拟节点的内置函数createElement
      */
      
      render: function (createElement) {
        return createElement('h3', {}, this.msg.toUpperCase())
      }
    })

    /* 
    render函数什么执行?
    1. 初始化执行第一次产生虚拟DOM => 生成对应的真实DOM => 并替换掉页面上的el元素显示
    2. 一旦数据发生变化, 再次执行产生新的虚拟DOM => 进行新旧虚拟DOM diff => 进行最小化的真实DOM更新
    */
  </script>
</body>
</html>